<template>
 <view style="width: 100vw;height: 100vh;background: #F7FAFE">
   <H5Navbar searchPlaceholder="请搜索客户名称" mode="search" @throwSeach="getSearchList"></H5Navbar>
   <view style="padding: 80rpx 20rpx 0 20rpx;width: 100%;height: 100%;box-sizing: border-box">
     <template v-if="customerList.length">
       <view class="main-block" v-for="item in customerList" :key="item.id">
         <view>
           客户名称：{{item.customerName}}
         </view>
         <view style="font-size: 28rpx">
           <view class="flex-row status-black">
             <view style="color: #000;font-weight:700">客户状态：</view>
             <view style="color: #979797">{{item.status}}</view>
           </view>
           <view class="flex-row status-black">
             <view style="color: #000;font-weight:700">客户行业：</view>
             <view style="color: #979797">{{item.customerIndustry}}</view>
           </view>
           <view class="flex-row status-black">
             <view style="color: #000;font-weight:700">项目名称：</view>
             <view style="color: #979797">{{item.projectName}}</view>
           </view>
           <view class="flex-row status-black">
             <view style="color: #000;font-weight:700">跟进人：</view>
             <view style="color: #979797">{{item.followByName}}</view>
           </view>
           <view class="flex-row status-black">
             <view style="color: #000;font-weight:700">客户联系人：</view>
             <view style="color: #979797">{{item.customerContact}}</view>
           </view>
           <view class="flex-row status-black">
             <view  style="color: #000;font-weight:700">客户联系电话：</view>
             <view style="color: #979797">{{item.customerPhone || '无'}}</view>
           </view>
           <view class="flex-row status-black" style="justify-content: flex-end">
             <button type="primary" size="default" class="btn-handle" @click="followUp(item)"
             :disabled="item.status == '流失客户' || item.status == '已成交'">跟进</button>
<!--             <button type="primary" size="default" class="btn-handle" @click="toCreateCustomer(2,item)">详情</button>-->
<!--             <button type="primary" size="default" class="btn-handle" @click="toCreateCustomer(1,item)"-->
<!--                     :disabled="item.status != '草稿'">编辑</button>-->
<!--             <button type="warn" size="default" class="btn-handle" @click="delCustomerPeople(item)"-->
<!--             :disabled="item.status != '草稿'">删除</button>-->
           </view>
         </view>
       </view >
     </template>
     <view style="height: 120rpx;" v-if="customerList.length"></view>

     <u-empty
         mode="data"
         v-if="!customerList.length"
         icon="http://cdn.uviewui.com/uview/empty/data.png"
     ></u-empty>
   </view>


   <view style="position: fixed;bottom: 0;height: 120rpx;width: 100%;padding: 0 20rpx;box-sizing: border-box;background: #fff">
     <button type="primary" style="height: 80rpx;line-height: 80rpx" @click="toCreateCustomer(0)">新建客户</button>
   </view>

   <u-modal :show="showDel" title="提示" content='是否确认删除' :showCancelButton="true" @confirm="confirmDel"
   @cancel="cancelDel">
     <template #default>
       <div class="flex-row" style="justify-content: center">是否确认删除</div>
     </template>
   </u-modal>
 </view>
</template>
<script>
import H5Navbar from "../../../components/H5Navbar";
import {myCustomerList,delCustomer} from '../../../api/work/userManage'

export default {
  name: "MyCreateCust",
  data(){
    return {
      showDel:false,
      paging:{
        currentPage:1,
        pageSize:5,
        total:0
      },
      customerList:[],
      customerDeptName:'',
      delId:''
    }
  },
  components:{
    H5Navbar
  },
  onReachBottom() {
    let allTotal = this.paging.currentPage * this.paging.pageSize
    if (allTotal < this.paging.total) {
      //当前条数小于总条数 则增加请求页数
      this.paging.currentPage++;
      this.getTableList() //调用加载数据方法
    } else {
      // console.log('已加载全部数据')
    }
  },
  onPullDownRefresh () {
    this.customerList = []
    this.paging.currentPage = 1
    //调用获取数据方法
    this.getTableList()
    setTimeout(() => {
      //结束下拉刷新
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad(){
    this.getTableList()
  },
  methods:{
    /**
     * @param mode
     * 0 新增
     * 1 编辑
     * 2 详情
     * */
    toCreateCustomer(mode,item = ''){
      console.log('???')
      uni.navigateTo({
        url:`/pageA/customer/MyCreateCustomer?mode=${mode}&id=${item ? item.id : ''}`,
        animationType: 'pop-in',
      })
    },

    getTableList(){
      const params = {
        current:this.paging.currentPage,
        size:this.paging.pageSize,
        customerDeptName:this.customerDeptName,
        menuType:1,
        isDistinct:1
      }
      myCustomerList(params).then(res => {
        if(res.code == 200){
          this.customerList = [...this.customerList,...res.data.records]
          this.paging.total = res.data.total
        }
        else{
          this.customerList = []
          this.paging.total = 0
        }
      })
    },

    getSearchList(value){
      this.customerDeptName = value
      this.customerList = []
      this.paging.currentPage = 1
      this.getTableList()
    },

    delCustomerPeople(item){
      this.showDel = true
      this.delId = item.id
    },
    confirmDel(){
      delCustomer(this.delId).then(res => {
        if(res.code == 200){
          const ind = this.customerList.findIndex(item => item.id == this.delId)
          if(ind != -1){
            this.$tipInfo('删除成功')
            this.customerList.splice(ind,1)
            this.showDel = false
          }
        }
        else{
          this.$tipInfo(res.msg || '删除失败')
        }
      })
    },
    cancelDel(){
      this.showDel = false
    },
    followUp(item){
      //去跟进详情
      uni.navigateTo({
        url:'/pageA/follow/activities?customerId='+item.id,
        animationType: 'pop-in',
      })
    }
  }
}


</script>

<style scoped lang="scss">
.main-block{
  width: 100%;
  margin-bottom: 40rpx;
  &>view:first-child{
    padding-left: 10rpx;
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #2979ff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: 700;
  }
  &>view:last-child{
    width: 100%;
    box-sizing: border-box;
    background: #fff;
  }
}

.status-black{
  box-sizing: border-box;
  padding:10rpx;
  height: 70rpx;
  border-bottom: 2rpx solid #EBEFF2;
}

.btn-handle{
  padding: 0 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  text-align: center;
  border-radius: 10rpx;
  margin:0 0 0 20rpx;
}
</style>
